<template>
        <el-card class="box-card">
          <div slot="header" class="header">
            <span>线上热门搜索</span>
             <template>
                <el-dropdown>
                 <span class="el-dropdown-link">
                 <svg t="1679794394564" class="el-icon-arrow-down el-icon--right icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1656" width="24" height="24"><path d="M256 512m-74.666667 0a74.666667 74.666667 0 1 0 149.333334 0 74.666667 74.666667 0 1 0-149.333334 0Z" fill="#515151" p-id="1657"></path><path d="M512 512m-74.666667 0a74.666667 74.666667 0 1 0 149.333334 0 74.666667 74.666667 0 1 0-149.333334 0Z" fill="#515151" p-id="1658"></path><path d="M768 512m-74.666667 0a74.666667 74.666667 0 1 0 149.333334 0 74.666667 74.666667 0 1 0-149.333334 0Z" fill="#515151" p-id="1659"></path></svg>   
                 </span>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item>黄金糕</el-dropdown-item>
                   <el-dropdown-item>狮子头</el-dropdown-item>
                   <el-dropdown-item>螺蛳粉</el-dropdown-item>
                   <el-dropdown-item >双皮奶</el-dropdown-item>
                   <el-dropdown-item >蚵仔煎</el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
             </template>
           </div>

  <el-divider></el-divider>
        <div class="main">
            <el-row :gutter="10">
              <el-col :span="12">
                <MyLine title='搜索用户数' :num="12321" >
                  <template slot="cnum">
                    <span>17.1</span>
                    <svg t="1679800551181" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2398" width="16" height="16"><path d="M960 704L512 256l-448 448z" fill="#d81e06" p-id="2399"></path></svg>
                  </template>
                  <template slot="picline">
                    <div class="linecard" ref="linecard1"></div>
                  </template>
                </MyLine>
              </el-col>
              <el-col :span="12">
                <MyLine title='人均搜索次数' :num='2.7' >
                   <template slot="cnum">
                    <span>26.2</span>
                    <svg t="1679800593799" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3973" width="16" height="16"><path d="M941.808046 195.931415 512 828.068585 82.191954 195.931415Z" p-id="3974" fill="#1afa29"></path></svg>
                    </template>
                    <template slot="picline">
                    <div class="linecard" ref="linecard"></div>
                  </template>
                </MyLine>
              </el-col>
            </el-row>
          
        </div>
        <div class="content">
               <el-table border style="width: 100%" :data="tabledata">
                 <el-table-column type="index" label="排名" width="80">
                 </el-table-column>
                 <el-table-column  label="搜索关键词" >
                 </el-table-column>
                 <el-table-column  label="用户数" sortable>
                 </el-table-column>
                 <el-table-column  label="周涨幅" sortable>
                 </el-table-column>
               </el-table>  
               </div>
    
        <div class="footer">
        <div class="block">
         <el-pagination
         style="textAlign:right"
           layout="prev, pager, next"
           :total="1000">
         </el-pagination>
        </div>
        </div>
     </el-card>
</template>

<script>
import MyLine from '@/views/dashboard/observe/search/line/line' 
import * as echarts from 'echarts' 
export default {
   data(){
        return{
             tabledata:[
               { }
          ]   
        }
    },
   components:{  MyLine },
   mounted(){
    let mychart=echarts.init(this.$refs.linecard)
    let mychart1=echarts.init(this.$refs.linecard1)
    mychart.setOption({
      xAxis:{
        show:false,
        type:'category'
      },
      yAxis:{
        show:false
      },
      series:[{
        type:'line',
        data:[1,5,7,3,7,8,23,17,5],
        smooth:true,
         itemStyle: {
            opacity: 0,
          },
           areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "blue", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#fff", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
      }],
       grid: {
        left: 0,
        right: 0,
        top: 10,
        bottom: 0,
      },
    })
     mychart1.setOption({
      xAxis:{
        show:false,
        type:'category'
      },
      yAxis:{
        show:false
      },
      series:[{
        type:'line',
         data:[1,5,7,3,7,8,23,17,5],
        smooth:true,
         itemStyle: {
            opacity: 0,
          },
        areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "blue", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#fff", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
      }],
       grid: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
      },
    })
   }
}
</script>

<style scoped>
/* .icon{
    float: right;
} */
.el-divider{
    margin-top: -30px;
}
  .el-dropdown-hover {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
.header{
    display: flex;
    justify-content: space-between;
  
}

.linecard{
  width:100%;
  height:80px;
  margin-bottom: 15px;
}
</style>